<template>
  <div class="user">
    <div class="mb-10">
      <el-button type="success" @click="add()" class="mr-4">新增</el-button>
      <el-input
        v-model="filtrate.keyword"
        style="width: 240px"
        placeholder="请输入用户名字"
        clearable
        class="mr-2"
      />
      <el-input
        v-model="filtrate.shopname"
        style="width: 240px"
        placeholder="请输入门店名字"
        clearable
        class="mr-2"
      />
      <el-button type="primary" :icon="Search" @click="search()"
        >查询</el-button
      >
    </div>
    <div>
      <el-table :data="userInfo" border style="width: 100%" height="700">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column
          prop="user_mobile"
          label="手机号"
          width="200"
          maxlength="11"
        ></el-table-column>
        <el-table-column
          prop="user_name"
          label="用户名字"
          width="200"
        ></el-table-column>
        <el-table-column prop="user_image" label="用户头像" width="90">
          <template #default="{ row }">
            <div style="height: 70px; width: 70px">
              <el-avatar
                style="height: 70px; width: 70px"
                :src="row.user_image"
              ></el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="ext_field2"
          label="门店名字"
          width="200"
        ></el-table-column>
        <el-table-column label="门店图片" width="120">
          <template #default="{ row }">
            <el-image
              style="width: 100%; height: 100px"
              :src="row.ext_field1"
              :z-index="99999"
            />
          </template>
        </el-table-column>
        <el-table-column label="是否展示" width="100">
          <template #default="{ row }">
            <div class="flex justify-center items-center">
              <el-switch
                :active-value="0"
                :inactive-value="1"
                v-model="row.is_show"
                @change="update(row)"
                style="
                  --el-switch-on-color: #13ce66;
                  --el-switch-off-color: #ff4949;
                "
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="edit(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-center items-center">
        <el-pagination
          style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="filtrate.page"
          :page-size="filtrate.limit"
          @current-change="handlePage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="isShow" width="80%" :title="type ? '编辑' : '新增'">
      <template #footer>
        <div>
          <el-form :model="row" label-width="90px" ref="ruleFormRef">
            <el-row :gutter="10">
              <el-col :span="24">
                <el-form-item label="手机号" prop="user_mobile" required>
                  <el-input v-model="row.user_mobile" />
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="名字" prop="user_name" required>
                  <el-input v-model="row.user_name" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="门店名字" prop="ext_field2" required>
                  <el-input v-model="row.ext_field2" />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="头像" prop="user_name" required>
                  <el-upload
                    :data="{ directory: '/' }"
                    class="avatar-uploader"
                    :action="setting.uploadUrl"
                    :show-file-list="false"
                    :on-success="handleSuccess"
                    :limit="1"
                    accept="image/*"
                  >
                    <img
                      v-if="row.user_image"
                      :src="row.user_image"
                      class="avatar"
                    />
                    <el-icon v-else class="avatar-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="门店图片(默认350 X 170)"
                  prop="user_name"
                  required
                >
                  <label class="btn" for="uploads">
                    <img
                      v-if="row.ext_field1"
                      :src="row.ext_field1"
                      class="avatar"
                    />
                    <el-icon v-else class="avatar-uploader-icon"
                      ><Plus
                    /></el-icon>
                  </label>
                  <input
                    type="file"
                    id="uploads"
                    style="position: absolute; clip: rect(0 0 0 0)"
                    accept="image/png, image/jpeg, image/gif, image/jpg"
                    @change="uploadImg($event, 1)"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(ruleFormRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="imgShow" width="600" :title="type ? '编辑' : '新增'">
      <div style="width: 500px; height: 500px; margin: 0 auto">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.size"
          :outputType="option.outputType"
          :auto-crop="option.autoCrop"
          :auto-crop-width="option.autoCropWidth"
          :auto-crop-height="option.autoCropHeight"
          :center-box="option.centerBox"
        ></vueCropper>
      </div>
      <template #footer>
        <div class="- flex justify-center items-center">
          <el-button type="primary" @click="confirmImg()"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import user from "@/api/user.js";
import uploadFile from "@/api/uploadFile.js";
import setting from "@/settings.js";
import { reactive, ref, onMounted } from "vue";
const filtrate = reactive({
  page: 1,
  limit: 10,
  keyword: "",
  shopname: "",
});
const total = ref(0);
const userInfo = ref([]);
const isShow = ref(false);
const imgShow = ref(false);
const row = ref({});
const ruleFormRef = ref(null);
const type = ref(false);
const option = reactive({
  img: "",
  size: 1,
  autoCrop: true,
  outputType: "png",
  autoCrop: true,
  autoCropWidth: 350,
  autoCropHeight: 175,
  centerBox: true,
});
const cropper = ref(null);
const loadUserData = async () => {
  const res = await user.userData(filtrate);
  userInfo.value = res.userList;
  total.value = res.total;
};
const handlePage = (pno) => {
  filtrate.page = pno;
  loadUserData();
};
const search = () => {
  filtrate.page = 1;
  loadUserData();
};
const update = async (val) => {
  const res = await user.update(val);
  loadUserData();
};
const create = async (val) => {
  const res = await user.create(val);
  loadUserData();
};
const edit = (e) => {
  row.value = { ...e };
  isShow.value = true;
  type.value = true;
};
const add = () => {
  row.value = {};
  isShow.value = true;
  type.value = false;
};
const handleSuccess = (res, file, fileList) => {
  if (res.code == 200) {
    row.value.user_image = res.data.urlFull;
  }
};
const uploadImg = (e) => {
  let file = e.target.files[0];
  let reader = new FileReader();
  reader.onload = function () {
    option.img = window.URL.createObjectURL(new Blob([this.result]));
    imgShow.value = true;
  };
  reader.readAsArrayBuffer(file);
};
const confirmImg = () => {
  cropper.value.getCropBlob(async (data) => {
    const formData = new FormData();
    formData.append("file", data);
    formData.append("directory", "/");
    const res = await uploadFile.upload(formData);
    console.log(res);
    row.value.ext_field1 = res.urlFull;
    imgShow.value = false;
  });
};
const confirm = async (formEl) => {
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!/^1[3-9]\d{9}$/.test(row.value.user_mobile)) {
        return ElMessage({
          type: "error",
          message: "手机格式错误",
        });
      }
      if (type.value) {
        await update(row.value);
      } else {
        await create(row.value);
      }
      isShow.value = false;
    }
  });
};
onMounted(() => {
  loadUserData();
});
</script>
<style scoped>
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.btn {
  display: inline-block;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 178px;
  height: 178px;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
